<template>
  <div class="map" id="map"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import shandongJson from '../assets/static/map/shandong.json'

// ECharts 实例
const chart = ref(null);

// Vue 组件挂载时初始化图表
onMounted(() => {

  var chinaGeoCoordMap = {
    '聊城市': [115.99159, 36.46276],
    '德州市': [116.36555, 37.44131],
    '滨州市': [117.97740, 37.38820],
    '东营市': [118.58846, 37.45485],
    '潍坊市': [119.16837, 36.71265],
    '青岛市': [120.38946, 36.07223],
    '烟台市': [121.45442, 37.47004],
    '威海市': [122.12754, 37.51643],
    '日照市': [119.53342, 35.42284],
    '临沂市': [118.36354, 35.11067],
    '淄博市': [118.06145, 36.81908],
    '济南市': [117.12640, 36.65655],
    '泰安市': [117.09449, 36.20586],
    '枣庄市': [117.33054, 34.81599],
    '济宁市': [116.59361, 35.42018],
    '菏泽市': [115.48755, 35.23941]
  }

  var series = [
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 10,
      data: [{
        name: '德州市',
        value: [116.36555, 37.44131]
      },
      {
        name: '济南市',
        value: [117.12640, 36.65655]
      }
      ],
      itemStyle: {
        normal: {
          color: 'yellow',
          shadowBlur: 10,
          shadowColor: 'yellow'
        }
      },

    },
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, // 箭头指向速度，值越小速度越快
        trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', // 箭头图标
        symbolSize: 5 // 图标大小
      },
      lineStyle: {
        normal: {
          width: 1, // 尾迹线条宽度
          opacity: 1, // 尾迹线条透明度
          curveness: 0.3, // 尾迹线条曲直度
          color: 'yellow'
        }
      },
      data: [
        {
          coords: [[117.12640, 36.65655], [116.36555, 37.44131]],
          lineStyle: {
            color: 'red',
            type: 'solid',
          },
        }
      ]
    },
  ]

  // 初始化 ECharts 实例
  chart.value = echarts.init(document.getElementById('map'));
  echarts.registerMap('jinan', shandongJson);

  let option = {
    geo: {
      map: 'jinan',
      aspectScale: 0.95,
      layoutCenter: ['50%', '50%'], // 地图位置
      layoutSize: '108%',
      selectedMode: 'single', // 设置为单选模式
      zoom: 1, // 当前视角的缩放比例
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      itemStyle: {
        areaColor: 'rgb(37,94,113)',
        borderColor: '#fff',
      },
      emphasis: {
        disabled: true,
      },
    },
    series: series
  };
  chart.value.setOption(option);
});


</script>

<style scoped>
.map {
  width: 90%;
  height: 90%;
}

.back {
  width: 55px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>